import { Component } from "react";
import { withRouter } from "react-router-dom";

import { Form, Input, Button, Row, Col } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { validatePass } from "../../utils/validate";
// import { login } from "../../api/account";
import CodeBtn from "../../components/code/index";
import CryptoJs from "crypto-js";
// import { setToken,setSession } from "../../utils/sesstion";
import {connect} from 'react-redux'
import actions from '@/store/action/user';

// 目前测试的登录账号密码： 18310612838@qq.com cb123456
class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      module: "login",
      loading: false
    };
  }
  // 静态方法
  // 提交拿到input框里面的值
  onFinish = async values => {
    const { username, code, password } = values;
    const requestData = {
      username,
      code,
      password: CryptoJs.MD5(password).toString()
    };
    // this.setState({ loading: true });
    this.props.toLogin(requestData)
    // try {
    //   const { resCode, data } = res;
    //   if (resCode === 0) {
    //     setToken(data.token);
    //     setSession('Username',data.username)
    //     setSession('role',data.role)
    //     // 处理登录之后的逻辑--这个方法一般妨碍redux中处理
    //     this.props.history.push("/index");
    //   }
    //   message.success(res.message);
    // } catch (error) {
    //   this.setState({ loading: false });
    //   message.warn("登录失败");
    // }
  };
  // 是否有账号--决定获取验证码是否高亮
  accountChange = (e, a) => {
    if (e.target.value) {
      this.setState({
        username: e.target.value
      });
    }
  };

  render() {
    const { cut } = this.props;
    const { username, module, loading } = this.state;

    return (
      <div>
        <div className="form-header">
          <h4 className="column">登录</h4>
          <span onClick={() => cut("register")}>账号注册</span>
        </div>
        <div className="form-content">
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: "邮箱不能为空！" },
                { type: "email", message: "邮箱格式不正确" }
              ]}
            >
              <Input
                placeholder="账号"
                prefix={<UserOutlined className="site-form-item-icon" />}
                onChange={this.accountChange}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: "密码不能为空" },
                // ({getFieldValue})=>({
                //  validator(rule,value){
                //  return value.length<6 ? Promise.reject('不能小于六位'):Promise.resolve()
                //  }
                // }),
                // {min:6,message:'不能小于六位'},
                // {max:20,message:"不能大于20位"}
                {
                  pattern: validatePass(),
                  message: "请输入大于6位小于20位数字+字母"
                }
              ]}
            >
              <Input
                placeholder="密码"
                type="password"
                prefix={<LockOutlined className="site-form-item-icon" />}
              />
            </Form.Item>
            <Form.Item
              name="code"
              rules={[
                { required: true, message: "请输入验证码！" },
                { min: 6, message: "请输入六位验证码！" },
                { max: 6, message: "请输入六位验证码！" }
              ]}
            >
              <Row gutter={13}>
                <Col span="15">
                  <Input
                    placeholder="验证码"
                    prefix={<LockOutlined className="site-form-item-icon" />}
                  />
                </Col>
                <Col span="9">
                  <CodeBtn username={username} module={module}></CodeBtn>
                </Col>
              </Row>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block loading={loading}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}
// 这种方式可以
export default connect(state=>({...state.user}),actions)(withRouter(LoginForm));